import React from 'react'
import LinearGradient from 'react-native-linear-gradient'
import { StyleProp, ViewStyle } from 'react-native'
import EStyleSheet from 'react-native-extended-stylesheet'
import Button from './Button'

const COLORS_ARR = ['#7CD795', '#6ED58B']
const DISABLED_COLORS = ['#FFF', '#FFF']
interface Props {
  children: React.ReactNode
  color?: string[]
  style?: StyleProp<ViewStyle>
  disabled?: boolean
  onPress?: () => void
}

const LinearGradientButton: React.FC<Props> = (props) => {
  const {
    children, color = COLORS_ARR, style, disabled = false, onPress = () => {},
  } = props

  const colors = disabled ? DISABLED_COLORS : color

  return (
    <Button disabled={disabled} onPress={onPress}>
      <LinearGradient style={[styles.linearGradient, style, disabled && styles.disabled]} colors={colors}>
        {children}
      </LinearGradient>
    </Button>

  )
}

const styles = EStyleSheet.create({
  linearGradient: {
    borderWidth: 0.5,
    borderColor: 'transparent',
  },
  disabled: {
    backgroundColor: '$white',
    borderColor: '$disabled',
  },
  button: {
    height: '100%',
  },
})

export default LinearGradientButton
